<!-- 首页 -->
<template>
	<view class="container">
		<view class="cu-card no-card">
			<view class="cu-item shadow">
				<view class="cu-bar bg-white">
					<view class="action sub-title">
						<text class="text-xl text-bold text-blue">参赛查询</text>
						<text class="bg-blue"></text>
					</view>
				</view>
				<view class="padding-xl padding-top-xs">
					<u-form labelPosition="left" labelWidth="70" :model="formData" :rules="rules" ref="uForm">
						<u-form-item label="姓名" prop="student_name" required>
							<u-input placeholder="输入姓名" v-model="formData.student_name"></u-input>
						</u-form-item>
						<u-form-item label="证件号" prop="student_document_nums" required>
							<u-input placeholder="输入证件号" v-model="formData.student_document_nums"></u-input>
						</u-form-item>
						<u-form-item label="赛事" prop="match_type_id">
							<uni-data-select v-model="formData.match_type_id" :localdata="gameList" placeholder="选择查询赛事"
								:clear="false" class="u-input" style="border-radius: 4px;"></uni-data-select>
						</u-form-item>
					</u-form>
					<view class="margin-top-xl flex justify-between">
						<view style="width: 58%;">
							<u-button type="primary" text="查询信息" @click="handleSearch"></u-button>
						</view>
						<view style="width: 38%;">
							<u-button type="primary" :plain="true" text="重置" @click="handleReset"></u-button>
						</view>
					</view>


				</view>

			</view>
		</view>

		<view class="cu-card dynamic no-card margin-top">
			<view class="cu-item shadow">
				<view class="cu-bar bg-white">
					<view class="action sub-title">
						<text class="text-xl text-bold text-orange">参赛信息</text>
						<text class="bg-orange"></text>
					</view>
				</view>
				<view class="padding-lr-sm padding-top-xs padding-bottom-xl"
					v-if="searchStatus==1 && gameResult.length">
					<u-collapse :value="[0]">
						<u-collapse-item v-for="(item,index) in gameResult" :key="item.id"
							:title="item.match_area_group_name" :name="index">

							<view class="result-container">

								<view class="flex item">
									<view class="title">
										<text>姓名</text>
									</view>
									<view class="content">
										<text>{{item.student_name || '-'}}</text>
									</view>
								</view>
								<view class="flex item">
									<view class="title">
										<text>证件号</text>
									</view>
									<view class="content">
										<text>{{maskIdCard(item.student_document_nums)}}</text>
									</view>
								</view>
								<view class="flex item">
									<view class="title">
										<text>参加赛事</text>
									</view>
									<view class="content">
										<text>{{item.match_type_name || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_area_group_name">
									<view class="title">
										<text>赛事区域</text>
									</view>
									<view class="content">
										<text>{{item.match_area_group_name || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_parent_cate_name">
									<view class="title">
										<text>参赛组别</text>
									</view>
									<view class="content">
										<text>{{item.match_parent_cate_name || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_cate_name">
									<view class="title">
										<text>参赛组项</text>
									</view>
									<view class="content">
										<text>{{item.match_cate_name || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_sign_times">
									<view class="title">
										<text>签到时间</text>
									</view>
									<view class="content">
										<text>{{item.match_sign_times || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_event_times">
									<view class="title">
										<text>比赛时间</text>
									</view>
									<view class="content">
										<text>{{item.match_event_times || '-'}}</text>
									</view>
								</view>
								<view class="flex item" v-if="item.match_address">
									<view class="title">
										<text>比赛地点</text>
									</view>
									<view class="content">
										<text>{{item.match_address || '-'}}</text>
									</view>
								</view>
								<view class="flex item">
									<view class="title">
										<text>说明</text>
									</view>
									<view class="content">
										<text>{{item.check_remark || '-'}}</text>
									</view>
								</view>
							</view>
							<view class="padding-top-sm">
								<text class="text-red">注意事项：</text>
								<text>{{item.match_note || '-'}}</text>
							</view>
						</u-collapse-item>
					</u-collapse>

				</view>
				<view class="padding-xl padding-top-sm text-center" v-if="searchStatus!==1 || gameResult.length==0">
					<text>{{searchText}}</text>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		name: "",
		data() {
			return {
				gameList: [],
				searchText: '填写姓名及证件号查询参赛信息',
				searchStatus: 0,
				gameResult: {},
				formData: {
					match_type_id: '',
					student_name: '',
					student_document_nums: '',
				},
				rules: {
					'student_name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'student_document_nums': {
						type: 'string',
						required: true,
						message: '请填写证件号',
						trigger: ['blur', 'change']
					},
				}
			}
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},
		onShow() {
			this.getGameList()
		},
		onShareAppMessage() {
			return {
				title: '潇湘键盘参赛查询',
				path: '/pages/pages_index/inside/searchSignUp'
			}
		},
		onShareTimeline() {},
		methods: {
			maskIdCard(idCard) {
				if (idCard.length !== 18) {
					return "****";
				}
				return idCard.substring(0, 6) + "****" + idCard.substring(17);
			},
			// 获取赛事列表
			getGameList() {
				this.$http.getMatchTypeList().then(res => {
					if (res.list.length) {
						this.gameList = res.list.map(item => {
							return {
								text: item.name,
								value: item.id
							}
						})
						this.formData.match_type_id = this.gameList[0]['value']
					}
				})
			},
			handleReset() {
				this.searchStatus = 0
				this.searchText = '填写姓名及证件号查询参赛信息'
				this.formData = {
					student_name: '',
					student_document_nums: ''
				}
				this.$refs.uForm.clearValidate(['student_name', 'student_document_nums'])
			},
			handleSearch() {
				this.$refs.uForm.validate().then(res => {
					this.searchStatus = 0
					this.searchText = '正在查询'
					this.$http.searchStudentGameInfo(this.formData).then(res => {
						this.searchStatus = 1
						this.$nextTick(() => {
							this.gameResult = res
						})
					}).catch(err => {
						this.searchStatus = 2
						this.searchText = '无数据，请核对姓名与证件号是否正确'
					})
				})

			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.result-container {
			border: 1px solid #c0dcf8;
		
			&>.item {
				border-top: 1px solid #c0dcf8;
		
				&:first-child {
					border-top: none;
				}
		
				&>.title {
					width: 90px;
					flex-shrink: 0;
					background-color: #d7f5f7;
					padding: 20rpx 20rpx;
				}
		
				&>.content {
					color: #222;
					padding: 20rpx 20rpx;
				}
			}
		
		
		}
	}
</style>